<template>
<div style="background-color: #f5f5f5" :style="{ backgroundColor: 'rgba(128,128,128,0.09)',width: '100vw',minHeight:'calc(100vh - 50px)'}">
  <el-image
    style="width: 100vw;margin-top: -30px"
    :src="url"
    :fit="fit"></el-image>
  <div style="position: absolute;top: 20px;width: 100vw">
  <div style="display: flex; align-items: center;padding: 20px;">
    <div style="margin-right: 5px;z-index: 10" @click="tiao">
      <el-avatar  :src="user.picture" style="width: 80px;height: 80px"></el-avatar>
    </div>
    <div style="color: white;z-index: 10">
      <div style="font-size: 20px;text-align: center">{{user.nickName}}</div>
      <div style="margin-top: 10px">
        <el-button style="width: 50px;background-color: red;border-color: red;color: white" @click="dialogVisible=true">充值</el-button>
      </div>
    </div>
  </div>
  <div style="display: flex; padding: 10px; color: white;text-align: center;">
    <div style="flex: 1;">
      <div style="font-size: 16px;font-weight: bold">{{user.balance}}</div>
      <div style="margin-top: 5px;font-weight: bold;font-size: 15px">余额</div>
    </div>
    <div style="flex: 1;">
      <div style="font-size: 16px;font-weight: bold">1</div>
      <div style="margin-top: 5px;font-weight: bold;font-size: 15px">商品收藏</div>
    </div>
    <div style="flex: 1;">
      <div style="font-size: 16px;font-weight: bold">1</div>
      <div style="margin-top: 5px;font-weight: bold;font-size: 15px">历史浏览</div>
    </div>
    <div style="flex: 1;">
      <div style="font-size: 16px;font-weight: bold">1</div>
      <div style="margin-top: 5px;font-weight: bold;font-size: 15px">退款</div>
    </div>
  </div>
  </div>

<el-card style="margin-top: 10px" shadow="never">
  <div style="display: flex; padding: 10px; color: black;text-align: center;margin-top: 0px">
        <div style="flex: 1;position: relative" @click="turnToOrder(1)">
          <div style="font-size: 30px">
            <i class="el-icon-s-finance"></i>
          </div>
          <div style="margin-top: 0px;font-size: 15px" >待付款</div>
          <div style="position: absolute;top: 0;right: 10px"><van-badge :content="count.count0" /></div>
        </div>
    <div style="flex: 1;position: relative" @click="turnToOrder(2)">
      <div style="font-size: 30px"><i class="el-icon-suitcase-1"></i> </div>
      <div style="margin-top: 0px;font-size: 15px">待收货</div>
      <div style="position: absolute;top: 0;right: 10px"><van-badge :content="count.count1" /></div>
    </div>
    <div style="flex: 1;position: relative" @click="turnToOrder(3)">
      <div style="font-size: 30px"><i class="el-icon-chat-line-square"></i> </div>
      <div style="font-size: 15px">已收货</div>
      <div style="position: absolute;top: 0;right: 10px"><van-badge :content="count.count2" /></div>
    </div>
    <div style="flex: 1;" @click="$router.push('/order')">
      <div style="font-size: 30px"><i class="el-icon-notebook-1"></i> </div>
      <div style="font-size: 15px">我的订单</div>
    </div>
  </div>
</el-card>
  <van-divider> <van-icon name="fire-o" color="#ee0a24" style="margin-right: 5px"/> 猜你喜欢</van-divider>

  <div style="padding-right: 10px;padding-left: 10px">
    <div class="card-container" >
      <el-card shadow="never" v-for="items in products" :key="items.id" style="width: 49%;margin-top: 5px;min-height: 270px;background-color: white;z-index: 20" id="e1">
        <!-- 卡片内容 -->
        <el-image class="square-image"
                  :style="{width: '100%',height: '49vw'}"
                  :src="items.img"
                  :fit="fit"></el-image>
        <div class="two-lines" :style="{width:e2 ,wordBreak: 'break-all',marginTop:'5px',height:'42px'}">
          {{items.itemDescription}}
        </div>
        <div style="display: flex;justify-content: space-between;padding: 10px;">
          <div style="color: red">￥{{items.price}}</div>
<!--          <div style="font-size: 14px;color: #999">200人已购买</div>-->
        </div>
      </el-card>
    </div>
    <div style="margin-bottom: 50px"></div>
  </div>
  <el-dialog
    title="充值"
    :visible.sync="dialogVisible" :show-close="false"
    width="80%">
    <div style="text-align: center;margin-bottom: 10px"> 充值金额：<el-input-number v-model="balance" :min="1" :max="100000" label="请输入充值金额"></el-input-number></div>
    <van-button type="primary" block round style="margin-bottom: 10px" color="red" @click="full"> 确定</van-button>
    <van-button type="info" round block @click="dialogVisible=false">取消</van-button>
  </el-dialog>
</div>
</template>

<script>
import Vue from 'vue';
import {Divider, Toast} from 'vant';
import { Icon } from 'vant';
import request from "../../utils/request";
import { Badge } from 'vant';

Vue.use(Badge);
Vue.use(Icon);
Vue.use(Divider);
export default {
  data(){
    return{
      balance:1,
      dialogVisible:false,
      user:{},
      count:{},
      fit:'cover',
      url: '/static/u6576.png',
      products:[],
      winHeight:null,
    }
  },
  created() {
    this.getOrderCount()
    this.chooseCat(1);
  },
  methods:{
    //充值
    full(){
      request.post('/user/fullMoney',{balance:this.balance}).then(resp=>{
        Toast(resp.errorMessage)
        this.getOrderCount()
        this.dialogVisible=false
      })
    },
    // 修改头像
    tiao(){
      this.$router.push({path:'/aAvatar',query:{pic:this.user.picture}})
    },
    chooseCat(i){
      request.post('/productDetails/chooseCat',{id:i}).then(resp=>{
        if (resp.code===0){
          this.products=resp.data
        }else {
          this.Toast(resp.errorMessage,'error')
        }
      })
    },
    // 查询4个订单（待付款、待收货、已收货待评价）
    getOrderCount(){
      request.get('/order/getCounts').then(resp=>{
        if (resp.code===200){
          for (let i = 0; i < resp.data.length; i++) {
            if (resp.data[i].status==0){
              this.count.count0=resp.data[i].count}
            if (resp.data[i].status==1){
              this.count.count1=resp.data[i].count}
            if (resp.data[i].status==2){
              this.count.count2=resp.data[i].count}
            if (resp.data[i].status==3){
              this.count.count3=resp.data[i].count}
            if (resp.data[i].status==4){
              this.count.count4=resp.data[i].count}
            if (resp.data[i].status==9){
              this.count.count9=resp.data[i].count}
          }
          this.user=resp.msg
        }
      })
    },
    turnToOrder(i){
      this.$router.push({path:'/order',query:{active:i}})
    },
  }
}
</script>

<style scoped>
.two-lines {
  margin-left: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
>>> .el-card__body{
  padding: 0;
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
>>> .van-divider{
  border-color: #999;
  width: 50%;
  margin-left: 25%;
}
>>> .el-image__inner{
  /*z-index: -1;*/
}
>>> .el-button{
  padding: 3px;
  border-radius:20px;
  font-size: 16px;
}
>>> .el-card__body{
  padding: 0;
}
</style>
